<template>
  <div class="center-table-container">
    <el-table
      :data="tableData"
      style="width: 100%; height: 100%;"
      :header-cell-style="headerCellStyle"
      :row-style="rowStyle"
      :cell-style="cellStyle"
      stripe
      class="order-table"
    >
      <el-table-column prop="time" label="时间" width="150" align="center">
        <template #default="scope">
          <span class="time-text">{{ scope.row.time }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="orderNumber" label="订单号" width="140" align="center">
        <template #default="scope">
          <span class="order-id-text">{{ scope.row.orderNumber }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="plateNumber" label="车牌号" width="120" align="center">
        <template #default="scope">
          <span class="car-number-text">{{ scope.row.plateNumber }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="orderStatus" label="订单状态" width="120" align="center">
        <template #default="scope">
          <span class="status-text" :class="getStatusClass(scope.row.orderStatus)">
            <span class="status-dot"></span>
            {{ scope.row.orderStatus }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="currentPower" label="当前电量" align="center">
        <template #default="scope">
          <span class="battery-text" :class="getBatteryClass(scope.row.currentPower)">{{ scope.row.currentPower }}%</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

interface TableDataItem {
  time: string
  orderNumber: string
  plateNumber: string
  orderStatus: string // 1-3年，3-5年，6-10年，11-15年，15年以上
  currentPower: number
}

const tableData = ref<TableDataItem[]>([
  // {
  //   time: '14:23:15',
  //   orderNumber: 'WO202401001',
  //   plateNumber: '京A12345',
  //   status: '执行中',
  //   priority: '高',
  //   battery: 80
  // },
  // {
  //   time: '14:22:45',
  //   orderNumber: 'WO202401002',
  //   plateNumber: '京A12346',
  //   status: '已完成',
  //   priority: '中',
  //   battery: 60
  // },
  // {
  //   time: '14:22:12',
  //   orderNumber: 'WO202401003',
  //   plateNumber: '京A12347',
  //   status: '已完成',
  //   priority: '高',
  //   battery: 40
  // },
  // {
  //   time: '14:21:58',
  //   orderNumber: 'WO202401004',
  //   plateNumber: '京A12348',
  //   status: '执行中',
  //   priority: '低',
  //   battery: 20
  // },
  // {
  //   time: '14:21:33',
  //   orderNumber: 'WO202401005',
  //   plateNumber: '京A12349',
  //   status: '已完成',
  //   priority: '中',
  //   battery: 10
  // }
])

const getStatusClass = (status: string) => {
  switch (status) {
    case '已完成':
      return 'status-completed'
    case '执行中':
      return 'status-processing'
    default:
      return 'status-cancelled'
  }
}

const getBatteryClass = (battery: number) => {
  if (battery >= 80) return 'battery-high'
  if (battery >= 50) return 'battery-medium'
  if (battery >= 30) return 'battery-low'
  return 'battery-critical'
}

// 表格样式配置
const headerCellStyle = {
  color: '#fff',
  fontWeight: '600',
  fontSize: '14px',
  textAlign: 'center',
  border: 'none'
}

const cellStyle = {
  background: 'transparent',
  color: '#8c9eff',
  fontSize: '13px',
  textAlign: 'center',
  border: 'none',
  borderBottom: '1px solid rgba(255, 255, 255, 0.1)'
}

const rowStyle = {
  backgroundColor: 'linear-gradient(90deg, #1e3a8a 0%, #3b82f6 100%);'
}


const init = (module: any) => {
  let data = JSON.parse(module)
  if (module) {
    tableData.value = data
  }
}

defineExpose({
  init
})
</script>

<style scoped lang="less">
// .center-table-container {
//   width: 100%;
//   height: 100%;
//   padding: 15px;
//   box-sizing: border-box;
// }

// :deep(.order-table) {
//   background: transparent;
//   border: 1px solid rgba(0, 212, 255, 0.3);
//   border-radius: 8px;
//   overflow: hidden;
  
//   .el-table__header {
//     background: transparent;
    
//     // th {
//     //   background: linear-gradient(90deg, #1e3a8a 0%, #3b82f6 100%) !important;
//     //   color: #ffffff !important;
//     //   border-bottom: 2px solid #1e40af !important;
//     // }
//   }
  
//   .el-table__body {
//     background: transparent;
    
//     tr {
//       background: transparent !important;
      
//       &:hover {
//         background: rgba(0, 212, 255, 0.1) !important;
//       }
      
//       &.el-table__row--striped {
//         background: rgba(0, 212, 255, 0.05) !important;
        
//         &:hover {
//           background: rgba(0, 212, 255, 0.15) !important;
//         }
//       }
//     }
    
//     td {
//       background: transparent !important;
//       color: #e2e8f0 !important;
//       border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
//     }
//   }
  
//   // 滚动条样式
//   .el-table__body-wrapper {
//     &::-webkit-scrollbar {
//       width: 6px;
//       height: 6px;
//     }
    
//     &::-webkit-scrollbar-track {
//       background: rgba(255, 255, 255, 0.1);
//       border-radius: 3px;
//     }
    
//     &::-webkit-scrollbar-thumb {
//       background: #00d4ff;
//       border-radius: 3px;
      
//       &:hover {
//         background: #0099cc;
//       }
//     }
//   }
// }

// 自定义文本样式
.time-text {
  color: #00d4ff;
  font-family: 'Courier New', monospace;
}

.order-id-text {
  color: #fff;
  font-family: 'Courier New', monospace;
}

.car-number-text {
  color: #ffd700;
  font-weight: 600;
}

.status-text {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  
  .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
  }
  
  &.status-completed {
    color: #00ff88;
    
    .status-dot {
      background: #00ff88;
      box-shadow: 0 0 8px #00ff88;
    }
  }
  
  &.status-processing {
    color: #ffd700;
    
    .status-dot {
      background: #ffd700;
      box-shadow: 0 0 8px #ffd700;
    }
  }
  
  &.status-pending {
    color: #ff4757;
    
    .status-dot {
      background: #ff4757;
      box-shadow: 0 0 8px #ff4757;
    }
  }
  
  &.status-cancelled {
    color: #666;
    
    .status-dot {
      background: #666;
      box-shadow: 0 0 8px #666;
    }
  }
}

.battery-text {
  font-weight: 600;
  
  &.battery-high {
    color: #00ff88;
  }
  
  &.battery-medium {
    color: #ffd700;
  }
  
  &.battery-low {
    color: #ff9500;
  }
  
  &.battery-critical {
    color: #ff4757;
  }
}

:deep(.el-table tr){
  background-color: transparent !important;
}


.center-table-container {
  width: 100%;
  height: 100%;
  padding: 15px;
  box-sizing: border-box;
  
  :deep(.el-table) {
    background: transparent;
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 8px;
    overflow: hidden;
    
    .el-table__header-wrapper {
      background: linear-gradient(90deg, #1e3a8a 0%, #3b82f6 100%);
      
      .el-table__header {
        background: linear-gradient(90deg, #1e3a8a 0%, #3b82f6 100%);
      }
    }
    
    .el-table__body-wrapper {
      background: transparent;
      
      &::-webkit-scrollbar {
        width: 6px;
      }
      
      &::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.1);
      }
      
      &::-webkit-scrollbar-thumb {
        background: #00d4ff;
        border-radius: 3px;
      }
    }
    
    .el-table__row {
      background: transparent;
      
      &:hover {
        background: rgba(0, 212, 255, 0.1) !important;
      }
      
      &.el-table__row--striped {
        background: rgba(0, 212, 255, 0.05);
      }
    }
    
    .el-table__cell {
      border: none;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      padding: 12px 0;
    }
    
    th.el-table__cell {
      background: transparent !important;
      color: #fff;
      font-weight: 600;
      font-size: 14px;
      border: none;
    }
    
    td.el-table__cell {
      color: #8c9eff;
      font-size: 13px;
    }
  }
}
</style>